<template>
    <div class="index">
        <router-view></router-view>
        <footer>
            <ul>
                <router-link tag="li" to="/home"><span></span>首页</router-link>
                <router-link tag="li" to="/bookrack"><span></span>书架</router-link>
                <router-link tag="li" to="/mypage"><span></span>我的</router-link>
            </ul>
        </footer>
    </div>
</template>
<script>
// c0392b
export default {
    name: "myindex",
    components: {},
    data() {
        return {};
    },
};
</script>

<style lang="scss" scoped>
.index {
    footer {
        background-color: #fff;
        box-sizing: border-box;
        border-top: 1px solid #ededed;
        width: 100%;
        position: fixed;
        bottom: 0;
        z-index: 999;
        height: 3rem;
        ul {
            display: flex;
            height: 3rem;
            width: 100%;
        }
        li {
            font-size: 0.75rem;
            color: #939393;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 3rem;
            flex: 1;
            text-align: center;
            box-sizing: border-box;
        }
        li:nth-child(1) {
            &.router-link-active {
                color: #c0392b;
                span {
                    width: 1.25rem;
                    height: 1.25rem;
                    background: url(../assets/index_active.png);
                    background-size: cover;
                }
            }
        }
        li:nth-child(2) {
            &.router-link-exact-active {
                color: #c0392b;
                span {
                    width: 1.25rem;
                    height: 1.25rem;
                    background: url(../assets/bookrack_active.png);
                    background-size: cover;
                }
            }
        }
        li:nth-child(3) {
            &.router-link-exact-active {
                color: #c0392b;
                span {
                    width: 1.25rem;
                    height: 1.25rem;
                    background: url(../assets/mine_active.png);
                    background-size: cover;
                }
            }
        }
        li:nth-child(1) span {
            box-sizing: border-box;
            margin-bottom: 0.1875rem;
            width: 1.25rem;
            height: 1.25rem;
            background: url(../assets/index.png);
            background-size: cover;
        }
        li:nth-child(2) span {
            box-sizing: border-box;
            margin-bottom: 0.1875rem;
            width: 1.25rem;
            height: 1.25rem;
            background: url(../assets/bookrack.png);
            background-size: cover;
        }
        li:nth-child(3) span {
            box-sizing: border-box;
            margin-bottom: 0.1875rem;
            width: 1.25rem;
            height: 1.25rem;
            background: url(../assets/mine.png);
            background-size: cover;
        }
    }
}
</style>
